Sigma Web Development

🔹 Universal Selector (*)

• Definition: Universal selector sabhi HTML elements ko target karta hai.
• Use-case: Base styling apply karna jaisa margin/padding reset, sabke liye ek consistent foundation.
• Syntax:

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
              

• Pros: Quick reset, sabhi elements ek jaisa style follow karte hain.
• Cons: Agar heavy rules rakhe, performance impact ho sakta hai, aur unwanted overrides ho sakte hain.

🔹 Element (Type) Selector

• Definition: Element selector ek specific HTML tag ko target karta hai (e.g., p, h1).
• Use-case: Sabhi paragraphs ko ek jaisa style dena—jaise font-size ya color set karna.
• Syntax:

  h1 {
      color: blueviolet;
      font-size: 2rem;
  }
  
  p {
      font-size: 1rem;
      line-height: 1.5;
  }
              

• Pros: Simple aur straightforward. Direct tags pe style apply hoti hai.
• Cons: Agar same tag baar-baar use ho, overlapping rules ho sakte hain aur maintenance tough ho sakti hai.

🔹 Class Selector (.classname)

• Definition: Class selector ek ya adhik elements ko group karke style apply karta hai.
• Use-case: Alag-alag tags ko ek jaisa style dena—jaise kuch headings aur paragraphs.
• Syntax:

  .note {
      background-color: #f9f9f9;
      padding: 10px;
      border-left: 4px solid #1a73e8;
  }
              

• Pros: Flexible, reuse across different elements.
• Cons: Agar class names descriptive nahi, CSS maintain karna mushkil ho sakta hai.

🔹 ID Selector (#idname)

• Definition: ID selector sirf ek unique element ko target karta hai jiski id same ho.
• Use-case: Ek page ka specific heading ya section uniquely style karna.
• Syntax:

  #header {
      background-color: #1a73e8;
      color: white;
      padding: 20px;
  }
              

• Pros: High specificity, direct unique element pe apply hota hai.
• Cons: Sirf ek element pe lagta hai. Agar multiple elements ko style karna ho, class better hoti hai.

🔹 Group Selector

• Definition: Group selector ek saath multiple selectors ko ek rule mein combine karta hai (comma-separated).
• Use-case: Kai elements ko same style dena, jaise headings aur paragraphs.
• Syntax:

  h1, p, .highlight {
      color: #1a73e8;
      background-color: #e8f0fe;
  }
              

• Pros: Code DRY rehta hai, fewer lines of CSS.
• Cons: Agar selectors bahut zyada ho, readability hurt ho sakti hai.

🔹 Attribute Selector ([type="text"])

• Definition: Attribute selector un elements ko target karta hai jinmein specified attribute/value pair hota hai.
• Use-case: Form inputs ko style karna based on type, ya specific links jinke href patterns match karein.
• Syntax:

  input[type="text"] {
      border: 2px solid #1a73e8;
      padding: 8px;
      width: 200px;
  }
              

• Pros: Precise targeting bina extra classes ke.
• Cons: Complex selectors performance impact daal sakte hain agar nested ho.

🔹 Child Selector (parent > child)

• Definition: Child selector sirf direct children ko target karta hai, nested descendants ignore karta hai.
• Use-case: Immediate child elements ko style karna without affecting deeper nested elements.
• Syntax:

  ul > li {
      list-style-type: circle;
      color: #1a73e8;
  }
              

• Pros: Precise control, avoids unintended nested styling.
• Cons: Multiple levels ke liye alag-alag selectors likhne padhenge.

🔹 Descendant Selector (ancestor descendant)

• Definition: Descendant selector nested elements ko bhi include karke target karta hai, chahe wo kisi bhi level par ho.
• Use-case: Pura nested structure ke andar sab matching elements ko style karna.
• Syntax:

  nav a {
      text-decoration: none;
      color: #1a73e8;
  }
              

• Pros: Flexible, deep nesting handle karta hai.
• Cons: Large DOM me slow ho sakta hai; specificity issues ho sakte hain.

🔹 Pseudo-classes (:hover, :first-child, :last-child, :visited, :link)

• Definition: Pseudo-classes elements ko unki state ya position ke basis par style karti hain (hover, first-child, etc.).
• Use-case: Interactive styling, jaisa hover effect, list-item ki special styling, link states.
• Syntax:

  a:hover {
      background-color: yellow;
      color: red;
  }
  li:first-child {
      font-weight: bold;
      color: blue;
  }
  li:last-child {
      font-style: italic;
      color: green;
  }
  a:visited {
      color: purple;
  }
  a:link {
      color: blue;
  }
              

• Pros: Bina JS ke small interactions implement kar sakte hain.
• Cons: Kuch pseudo-classes older browsers me support nahi karte (compatibility check zaroori hai).

🔹 Pseudo-elements (::before, ::after)

• Definition: Pseudo-elements page ke specific parts (jaise first letter) ko style karte hain ya extra content insert karte hain.
• Use-case: Decorative content (like icons), first letter styling, bina HTML modify kiye extra elements add karna.
• Syntax:

  p::first-letter {
      font-size: 2rem;
      color: #1a73e8;
  }
  div::after {
      content: "✨";
      color: gold;
  }
              

• Pros: Bina HTML change kiye content aur styling add kar sakte hain.
• Cons: Complex pseudo-element combinations maintain karna thoda tricky ho sakta hai.

📑 Combined Selectors (main.html)